<template>
	<view class="shenzhen">

		<view class="custom_header" style="height: {{navH}}px">
			<view class="search">

				<view>

					<view id="icon">

						<u-icon name="arrow-left" color="#2979ff" size="18" @click="icon"></u-icon>
					</view>
					<img src="/static/search.png" alt="" class="search_img">
					<input type="search" placeholder="搜索关键词" class="inp">
				</view>
				<view style="color: #2979ff; font-size: 13px;" @click="cancel">取消</view>
			</view>
		</view>
		<view class="one">
			<view class="one_a">
				<view>
					<img src="/static/img/1.png" alt="" class="img" style="margin-left: 15px;">
				</view>
				<view>
					<p style="margin-top: 3px; color: #666; font-size: 13px; margin-left: 8px;">客户</p>
					<p style="margin-top: 3px; color: #666; font-size: 13px; margin-left: 8px;">共10个结果</p>
				</view>
			</view>
			<ul class="one_b">
				<li class="one_li" v-for="(item, index)  in    list   " :key="index">
					<view class="one_p">
						<p @click="gongsi">{{ item.name }}</p>
						<p>{{ item.data }}</p>
						<p>{{ item.a }} <span style="color: #666;">{{ item.b }}<span>{{ item.c }}</span> </span></p>
					</view>
					<view style="text-align: center; position: relative;" class="vv">
						<p>
							<span
								style="display: block; position: absolute; top: 12px; right: 80px; width: 8px; height: 8px; background-color: #2979ff; border-radius: 50%;"></span>

							<span style="font-size: 14px;">{{ item.d }}</span>
						</p>
						<p>
							<img src="/static/img/1.png" class="one_img" @click=" liLi ">
						</p>
						<p>李小明</p>
					</view>
				</li>
			</ul>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const list = ref([
	{ id: 0, name: '深圳木卫二科技有限公司', data: "最后跟进: 2019-08-25 14:54", a: "客户星级", b: "★★★★", c: "☆", d: "正在跟进", img: '/static/img/1.png' },
	{ id: 1, name: '深圳木卫二科技有限公司', data: "最后跟进: 2019-08-25 14:54", a: "客户星级", b: "★★★★", c: "☆", d: "正在跟进", img: '/static/img/1.png', },
	{ id: 2, name: '深圳木卫二科技有限公司', data: "最后跟进: 2019-08-25 14:54", a: "客户星级", b: "★★★★", c: "☆", d: "正在跟进", img: '/static/img/1.png', },
	{ id: 3, name: '深圳木卫二科技有限公司', data: "最后跟进: 2019-08-25 14:54", a: "客户星级", b: "★★★★", c: "☆", d: "正在跟进", img: '/static/img/1.png', },
	{ id: 4, name: '深圳木卫二科技有限公司', data: "最后跟进: 2019-08-25 14:54", a: "客户星级", b: "★★★★", c: "☆", d: "正在跟进", img: '/static/img/1.png', },
	{ id: 5, name: '深圳木卫二科技有限公司', data: "最后跟进: 2019-08-25 14:54", a: "客户星级", b: "★★★★", c: "☆", d: "正在跟进", img: '/static/img/1.png', },
	{ id: 6, name: '深圳木卫二科技有限公司', data: "最后跟进: 2019-08-25 14:54", a: "客户星级", b: "★★★★", c: "☆", d: "正在跟进", img: '/static/img/1.png', },
	{ id: 7, name: '深圳木卫二科技有限公司', data: "最后跟进: 2019-08-25 14:54", a: "客户星级", b: "★★★★", c: "☆", d: "正在跟进", img: '/static/img/1.png', },
	{ id: 8, name: '深圳木卫二科技有限公司', data: "最后跟进: 2019-08-25 14:54", a: "客户星级", b: "★★★★", c: "☆", d: "正在跟进", img: '/static/img/1.png', },
	{ id: 9, name: '深圳木卫二科技有限公司', data: "最后跟进: 2019-08-25 14:54", a: "客户星级", b: "★★★★", c: "☆", d: "正在跟进", img: '/static/img/1.png', },
])
const cancel = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiao-sousuo/qiaoSousuo'
	})
}
const icon = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiao-sousuo/qiaoSousuo'
	})
}
const liLi = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiao-sousuo/qiaotouxiang'
	})
}
const gongsi = () => {
	uni.navigateTo({
		url: '/pages/qiao-crm/qiao-sousuo/qiaogongsi'
	})
}
</script>

<style scoped lang="scss">
.vv {
	width: 100px;
}

.one_img {
	width: 30px;
	height: 30px;
}

.one_p:nth-child(1) {
	margin-left: 8px;
	margin-top: 8px;
}

.one_b {
	width: 350px;
	overflow: hidden;
	background-color: #fff;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
}

.one_a {
	display: flex;
}

.one_li {
	width: 340px;
	height: 100px;
	display: flex;
	justify-content: space-between;
	border-radius: 10px;
	box-shadow: 0 0 10px #ccc;
	margin-top: 15px;
	margin-left: 10px;
	line-height: 30px;
}

.img {
	width: 50px;
	height: 50px;
}

.one {
	width: 375px;
	background-color: rgb(249, 249, 249);
	margin-top: 80px;
}

.custom_header {
	display: flex;
	justify-content: space-between;
	width: 100vw;
	font-weight: bold;
	position: fixed;
	left: 0;
	top: 30px;
	z-index: 99;
	background-color: #fff;

}

.search {
	display: flex;
	width: 375px;
	justify-content: space-between;
	padding-top: 10px;
	align-items: center;
	padding: 10px 10px;
	position: relative;

	.inp {
		width: 250px;
		height: 60rpx;
		border: 1rpx solid #ccc;
		border-radius: 30rpx;
		padding-left: 30px;
		margin-left: 30px;

	}
}

.search_img {
	width: 20px;
	height: 20px;
	position: absolute;
	left: 100rpx;
	top: 35rpx;
}

#icon {
	position: absolute;
	top: 18px;
	left: 10px;
	z-index: 66;
}

.shenzhen {
	overflow: hidden;
	width: 375px;
}
</style>
